// 在npm中搜索 
// gulp 插件
const gulp = require("gulp");
// html模块化 header footer
const fileinclude = require("gulp-file-include");
// js ES6 => ES5
// const babel = require("gulp-babel")
// css SCSS => CSS
const sass = require("gulp-sass")(require("sass"))
// 弹出新的页面 .create()直接弹出新页面
const browsersync = require("browser-sync").create()
// html压缩插件
const htmlmin = require("gulp-htmlmin");
// js压缩插件
const uglify  = require("gulp-uglify");
// css压缩插件
const cleancss = require("gulp-clean-css");


gulp.task("html" , async ()=>{
      // 带有规则的字符串路径; 
      // * 表示所有 ; 
      gulp.src(["./src/*.html"])
      // 对html多增加一个插件处理; 
      .pipe(fileinclude({
            prefix: '@@',
            basepath: '@file'
      }))
      .pipe(gulp.dest("./dist"))
});

// .pipe(babel({
//       presets: ['@babel/env']
// }))
// js
gulp.task("js" , async () => {
      gulp.src(["./src/javascripts/*.js"])
      .pipe(gulp.dest("./dist/javascripts"))
})

// css
gulp.task("scss" , async () => {//**** */
      gulp.src("./src/scss/*.scss")
      // 为了避免监视时因代码错误导致连接断开
      // 加上.on("error" , sass.logError)
      // 如果有错误就打印出来
      .pipe(sass().on("error" , sass.logError))
      .pipe(gulp.dest("./dist/css"))
})

// 监视 ( 监视js scss html有无改变 改变则dist也改变)
// 任务队列
// gulp.series 同步执行
// gulp.parallel 异步执行
gulp.task("watch" , async ()=>{
      gulp.watch(["./src/*.html"] , gulp.series("html" , browserSyncReload));
      gulp.watch(["./src/javascripts/*.js"] , gulp.series("js" , browserSyncReload));
      gulp.watch(["./src/scss/*.scss"] , gulp.series("scss" , browserSyncReload ));
});

// 自动打开页面
gulp.task("browserSync" , async () => {
      browsersync.init({
            server: {
                  // 基本路径
                  baseDir: "./" /*****这里因为要查找static路径下的文件所以要设置./ 
                  下次搜索需要加上localhost:3000/dist/ */
            },
            port: 3000 // 端口号
      })
});

// 自动刷新 *****
function browserSyncReload( done ) {
      browsersync.reload()
      done()
}

// 压缩时删除之前文件 存放压缩好的文件
function clearDir( done ){
      delete(["./dist/**/*"])
      setTimeout(() => {
            done()
      }, 1000 );
}

// 压缩
// await的作用是为了让这几个压缩进程同步进行 可以不写
gulp.task("min" , async () => {
      // 压缩html 
      await gulp.src("./src/*.html")
            // 压缩之后要重新赋予功能
            .pipe(fileinclude({
                  prefix : "@@" , 
                  basepath : "@file"
            }))
            .pipe(htmlmin({ collapseWhitespace:true }))
            .pipe(gulp.dest("./dist/"))
      // 压缩js文件
      await gulp.src( "./src/javascripts/*.js")
            // ES6 => ES5
            // .pipe(babel({
            //       presets: ['@babel/env']
            // }))
            // js压缩
            // .pipe(uglify())
            // 转存
            .pipe(gulp.dest('./dist/javascript'))
      // css压缩
      await gulp.src( "./src/scss/*.scss")
            // scss => css
            .pipe(sass().on('error', sass.logError))
            // 压缩css
            .pipe(cleancss({keepBreaks: false}))
            .pipe(gulp.dest("./dist/css"))
})

var build = gulp.series( clearDir , "min" )
exports.build = build

gulp.task("default" , gulp.series( clearDir , "html" , "js" , "scss" , "watch" , "browserSync" ))

